<template>
  <div>
    <div>
      <el-button type="primary" @click="baocun">下载并打印</el-button>

      <div id="printTest" ref="imageWrapper">
        <div class="printTests">
          <div class="title" style="font-size: 30px; font-weight: bold">
            中国产学研合作促进奖（个人）评审表
          </div>
          <div class="box">
            <div>
              <div>申报人：</div>
              <div>
                <div style="text-align: left" v-html="objs.user_name"></div>
              </div>
            </div>
            <div>
              <div>序号：</div>
              <div>
                <div style="text-align: left" v-html="obj.id"></div>
              </div>
            </div>
          </div>

          <div class="tables">
            <table border="1" cellspacing="0" cellpadding="0">
              <tr>
                <td>
                  <div>
                    <div>指标</div>
                    <div>等级</div>
                  </div>
                </td>

                <td witdh="500px">评分标准</td>
                <td>得分</td>
              </tr>

              <tr>
                <td>
                  <div>
                    <div>在推动产学研合作中</div>
                    <div>所做的工作（40分）</div>
                  </div>
                </td>
                <td witdh="500px" class="biao" heigth="64px">
                  <div>
                    <div>很好</div>
                    <div>-</div>
                    <div>（40-30分）</div>
                  </div>
                  <div>
                    <div>较好</div>
                    <div>-</div>
                    <div>（30-15分）</div>
                  </div>
                  <div>
                    <div>一般</div>
                    <div>-</div>
                    <div>（15-0分）</div>
                  </div>
                </td>
                <td>
                  <div>{{ form.fen1 }}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>
                    <div>是否对行业（领域、区域）</div>
                    <div>产学研合作促进影响</div>
                    <div>（20分）</div>
                  </div>
                </td>
                <td witdh="500px" class="biao" heigth="40px">
                  <div>
                    <div>很好</div>
                    <div>-</div>
                    <div>（20-15分）</div>
                  </div>
                  <div>
                    <div>较好</div>
                    <div>-</div>
                    <div>（15-10分）</div>
                  </div>
                  <div>
                    <div>一般</div>
                    <div>-</div>
                    <div>（10-0分）</div>
                  </div>
                </td>
                <td>
                  <div>{{ form.fen2 }}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>
                    <div>产学研合作案例</div>
                    <div>（30分）</div>
                  </div>
                </td>
                <td witdh="500px" class="biao" heigth="40px">
                  <div>
                    <div>很好</div>
                    <div>-</div>
                    <div>（30-20分）</div>
                  </div>
                  <div>
                    <div>较好</div>
                    <div>-</div>
                    <div>（20-10分）</div>
                  </div>
                  <div>
                    <div>一般</div>
                    <div>-</div>
                    <div>（10-0分）</div>
                  </div>
                </td>
                <td>
                  <div>{{ form.fen3 }}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>
                    <div>附件材料充分性</div>
                    <div>（10分）</div>
                  </div>
                </td>
                <td witdh="500px" class="biao1" heigth="40px"></td>
                <td>
                  <div>{{ form.fen4 }}</div>
                </td>
              </tr>

              <tr>
                <td>合计得分</td>
                <td colspan="2">
                  <div>{{ form.score }}</div>
                </td>
              </tr>
              <tr>
                <td style="height: 150px">
                  <div>简要阐述说明</div>
                  <div>（优点、缺点）</div>
                </td>
                <td colspan="2">
                  <div style="width: 700px; text-align: left">
                    {{ form.review_content }}
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <div class="bi">
                    <div>专家签字:</div>
                    <div>
                      <div>年</div>
                      <div>月</div>
                      <div>日</div>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { review_find, user_child_detailst } from "../axios/api";
export default {
  data() {
    return {
      isShow: true,
      iss: true,
      a: "",
      radio: "",
      obj: JSON.parse(sessionStorage.getItem("obj")),
      objs: {},
      form: {
        declare_name: "",
        number: "",
        fen1: "",
        fen2: "",
        fen3: "",
        fen4: "",
        score: "",
        review_content: "",
      },
    };
  },
  mounted() {
    this.user_child_detailst();
    this.review_find();
  },
  components: {},

  methods: {
    async user_child_detailst() {
      let params = {
        split_id: this.obj.id,
        token: sessionStorage.getItem("Token1"),
      };
      let res = await user_child_detailst(params);

      this.objs = res.data.data;
    },
    review_find() {
      let params = {
        id: this.obj.esid,
        token: sessionStorage.getItem("Token1"),
      };
      review_find(params).then((res) => {
        if (res.data.code == 200) {
          this.form.declare_name = res.data.data.declare_name;
          this.form.number = res.data.data.number;

          if (res.data.data.content[0]) {
            this.form.fen1 = res.data.data.content[0];
          }
          if (res.data.data.content[1]) {
            this.form.fen2 = res.data.data.content[1];
          }
          if (res.data.data.content[2]) {
            this.form.fen3 = res.data.data.content[2];
          }
          if (res.data.data.content[3]) {
            this.form.fen4 = res.data.data.content[3];
          }

          this.form.score = res.data.data.score;
          this.form.review_content = res.data.data.review_content;
        }
      });
    },
    dianji(e) {
      console.log(e);
      window.open(`https://view.officeapps.live.com/op/view.aspx?src=${e}`);
    },
    kan(e) {
      window.open(e, "_blank");
    },
    baocun() {
      this.iss = !this.iss;
      setTimeout(() => {
        this.$downloadPDF.downloadPDF(
          document.querySelector("#printTest"),
          this.objs.project_name + "-产学研合作促进奖（个人）评审表"
        );
        this.iss = !this.iss;
      }, 1000);
    },
  },
};
</script>

<style scoped>
.printTests {
  width: 1200px;
  margin: 0 auto;
}
.title {
  width: auto;
  box-sizing: border-box;
  padding: 20px;
  margin: 0 auto;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}
.box {
  display: flex;
  align-items: center;

  justify-content: space-between;
  margin-bottom: 10px;
}
.box > div {
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.box > div > div {
  margin-right: 20px;
}
.box >>> .el-radio__label {
  font-size: 20px;
  color: #000;
}
.tables {
  width: 1000px;

  height: auto;
  margin: 0 auto;
  margin-top: 30px;
}
.tables table {
  width: 100%;
}
.biao {
  display: flex;
  height: 100%;
}
.biao > div {
  flex: 1;
  height: 100%;
  border-right: 1px solid #000;
}
td {
  text-align: center;
}
td > div {
  padding: 15px;
}
.btn {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn > div {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #007acc;
  color: #fff;
  cursor: pointer;
  margin-left: 20px;
}
.zhendixia {
  width: 100%;
  height: 200px;
  position: relative;
}
.zhendixia > div:nth-child(1) {
  position: absolute;
  left: 10px;
  top: 0;
}
.zhendixia > div:nth-child(2) {
  position: absolute;
  right: 150px;
  bottom: 40px;
  display: flex;
  align-items: center;
}
.zhendixia > div:nth-child(2) > div {
  margin: 0 10px;
}
.bi {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bi > div:nth-child(2) {
  display: flex;
  align-items: center;
}
.bi > div:nth-child(2) > div {
  margin-right: 20px;
}
</style>
<style scoped>
.printTests {
  width: 1400px;
  margin: 0 auto;
}
.title {
  width: auto;
  box-sizing: border-box;
  padding: 20px;
  margin: 0 auto;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}
.box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.box > div {
  margin-right: 20px;
  display: flex;
  align-items: center;
  font-size: 26px;
}
.box > div > div {
  margin-right: 20px;
}
.box >>> .el-radio__label {
  font-size: 20px;
  color: #000;
}
.tables {
  width: 1400px;
  height: auto;
  margin: 0 auto;
  margin-top: 120px;
}
.tables table {
  width: 100%;
}
.biao {
  display: flex;
  height: 100%;
}
.biao > div {
  flex: 1;
  height: 100%;
  border-right: 1px solid #000;
}
td {
  text-align: center;
}
td > div {
  padding: 15px;
}
.btn {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.btn > div {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #007acc;
  color: #fff;
  cursor: pointer;
  margin-left: 20px;
  font-size: 14px;
}
.zhendixia {
  width: 100%;
  height: 200px;
  position: relative;
}
.zhendixia > div:nth-child(1) {
  position: absolute;
  left: 10px;
  top: 0;
}
.zhendixia > div:nth-child(2) {
  position: absolute;
  right: 150px;
  bottom: 40px;
  display: flex;
  align-items: center;
}
.zhendixia > div:nth-child(2) > div {
  margin: 0 10px;
}
input {
  background: none;
  outline: none;
  border: none;
}
.tables div {
  font-size: 24px;
}
tr {
  height: 120px;
  font-size: 24px;
}
tr > div {
  font-size: 24px;
  height: 120px;
}
.tables >>> .el-textarea__inner {
  border: none;
}
.tables input {
  font-size: 22px;
  height: 60px;
}
.bi {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bi > div:nth-child(2) {
  display: flex;
  align-items: center;
}
.bi > div:nth-child(2) > div {
  margin-right: 20px;
}
</style>